import React, { useState } from 'react';
import { DndContext, DragEndEvent, pointerWithin } from '@dnd-kit/core';
import { restrictToFirstScrollableAncestor } from '@dnd-kit/modifiers';

import { DroppableContainer, DraggableContainer } from './components';
import { DraggableOverlay } from '../components';
import { IDropVesselItem } from '../internals/dropEl';
import { generateId } from '@/util/utils';
import styles from './index.less';

const DragNDropContainer = () => {
  const [isDropped, setIsDropped] = useState(false);
  const [dropVesselList, setDropVesselList] = useState<IDropVesselItem[]>([]);
  const [contentScrollTop, setContentScrollTop] = useState(0);

  function handleDragEnd(event: DragEndEvent) {
    const { active, over } = event;
    console.log('handleDragEnd event', event);
    // 添加容器
    if (!over?.id && active.data.current?.type === 'vessel') {
      const newVessel: IDropVesselItem = {
        vesselId: `${active.id}-${generateId()}`,
        type: 'vessel',
      };
      setDropVesselList((state) => [...state, newVessel]);
    }
  }

  function handleDragStart(event: DragEndEvent) {
    console.log('handleDragStart event', event);
  }

  return (
    <DndContext
      modifiers={[restrictToFirstScrollableAncestor]}
      // collisionDetection={pointerWithin}
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
      // onDragCancel={() => setIsDragging(false)}
    >
      <div className={styles.dndContainer}>
        <div className={styles.leftContainer}>
          <DraggableContainer contentScrollTop={contentScrollTop}></DraggableContainer>
        </div>

        <div className={styles.rightContainer}>
          <DroppableContainer
            dropVesselList={dropVesselList}
            setContentScrollTop={setContentScrollTop}
          ></DroppableContainer>
        </div>
      </div>
    </DndContext>
  );
};

export default DragNDropContainer;
